import { Routes, Route, Navigate } from 'react-router-dom'
import { useAuthStore } from '@/stores/authStore'
import { useEffect } from 'react'

// 页面组件
import LoginPage from '@/pages/auth/LoginPage'

import DashboardPage from '@/pages/DashboardPage'
import ChatPage from '@/pages/ChatPage'
import AlbumPage from '@/pages/AlbumPage'
import PlansPage from '@/pages/PlansPage'
import GamePage from '@/pages/GamePage'
import ProfilePage from '@/pages/ProfilePage'
import GrammarPage from '@/pages/GrammarPage'
import NotesPage from '@/pages/NotesPage'
import UserManagementPage from '@/pages/admin/UserManagementPage'
// import PartnerSetupPage from '@/pages/PartnerSetupPage'

// 布局组件
import AuthLayout from '@/components/layouts/AuthLayout'
import MainLayout from '@/components/layouts/MainLayout'

// 路由守卫组件
import ProtectedRoute from '@/components/auth/ProtectedRoute'
import PublicRoute from '@/components/auth/PublicRoute'

function App() {
  const { user, isLoading, initializeAuth } = useAuthStore()

  useEffect(() => {
    initializeAuth()
  }, [])

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary-50 via-pink-50 to-rose-50 relative overflow-hidden">
        {/* 背景装饰 */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-primary-200/30 to-primary-400/20 rounded-full blur-3xl animate-pulse-glow"></div>
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-rose-200/30 to-rose-400/20 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '1s' }}></div>
        </div>
        
        <div className="text-center relative z-10">
          <div className="mb-6">
            <div className="mb-3">
              <span className="text-5xl">🌸</span>
            </div>
            <h1 className="text-4xl font-bold text-gradient-primary font-display mb-2">温の家 💕</h1>
            <p className="text-secondary-600">温暖如家的聊天空间 ✨</p>
          </div>
          <div className="loading-spinner w-12 h-12 mx-auto mb-4"></div>
          <p className="text-secondary-600 font-medium">加载中... 🚀</p>
        </div>
      </div>
    )
  }

  return (
    <Routes>
      {/* 公开路由 - 未登录用户可访问 */}
      <Route
        path="/login"
        element={
          <PublicRoute>
            <AuthLayout>
              <LoginPage />
            </AuthLayout>
          </PublicRoute>
        }
      />


      {/* 受保护的路由 - 需要登录 */}
      <Route
        path="/"
        element={
          <ProtectedRoute>
            <MainLayout />
          </ProtectedRoute>
        }
      >
        {/* 嵌套路由 */}
        <Route index element={<Navigate to="/chat" replace />} />
        <Route path="dashboard" element={<DashboardPage />} />
        <Route path="chat" element={<ChatPage />} />
        <Route path="album" element={<AlbumPage />} />
        <Route path="plans" element={<PlansPage />} />
        <Route path="notes" element={<NotesPage />} />
        <Route path="game" element={<GamePage />} />
        <Route path="profile" element={<ProfilePage />} />
        <Route path="grammar" element={<GrammarPage />} />
        <Route path="admin/users" element={<UserManagementPage />} />
        {/* <Route path="partner-setup" element={<PartnerSetupPage />} /> */}
      </Route>

      {/* 404 页面 */}
      <Route
        path="*"
        element={
          <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary-50 to-secondary-50">
            <div className="text-center">
              <h1 className="text-6xl font-bold text-gray-300 mb-4">404</h1>
              <p className="text-gray-600 mb-8">页面未找到</p>
              <button
                onClick={() => window.history.back()}
                className="btn btn-primary btn-md"
              >
                返回上一页
              </button>
            </div>
          </div>
        }
      />
    </Routes>
  )
}

export default App